<script lang="ts" setup>
import CNav from '@/components/CNav.vue'
import CReplyCard from '@/components/CReplyCard.vue'
import { useScript } from './newmsg_hook'
const { dataList, userInfo, Back, loadMoreComments, gotoUserInfo } = useScript()
</script>

<template>
  <view class="profile-page">
    <CNav left-text="返回" @left-click="Back" title="新消息" />
    <view v-if="dataList.length === 0" style="padding: 10px">
      <uv-empty mode="message" icon="https://cdn.uviewui.com/uview/empty/message.png"></uv-empty>
    </view>

    <scroll-view v-else class="comments-section" :scroll-y="true" @scrolltolower="loadMoreComments">
      <CReplyCard
        v-for="card in dataList"
        :id="card.id"
        :key="card.id"
        :user-id="card.user_id"
        :avatar="card.avatar"
        :name="card.nickname"
        :username="userInfo!.username"
        :handle="card.username"
        :time="(card.createtime as string)"
        :content="card.content"
        :is-liked="card.is_liked"
        :is-collected="card.is_collected"
        @gotoinfo="gotoUserInfo"
      ></CReplyCard>
    </scroll-view>
  </view>
</template>

<style scoped lang="scss">
.profile-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fff;
  padding-bottom: 40rpx;
  .comments-section {
    overflow-y: scroll;
    flex: 1;
    background-color: #f9f9f9;
  }
  .page-content {
    padding: 20px;
    padding-bottom: 1px;
    .profile-header {
      margin-bottom: 20px;
      text-align: left;
      .profile-info {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;
        width: 100%;
        .profile-avatar {
          margin-right: 15px; /* 设置头像和用户名之间的间距 */
          border-radius: 50%;
          width: 60px; /* 调整头像大小 */
          height: 60px;
          background-color: #e0e0e0;
        }
        .profile-name {
          font-weight: bold;
          font-size: 24px;
        }
      }
      .profile-bio {
        padding: 0 20px;
        font-size: $uni-font-size-base;
        color: $uni-text-color;
      }
    }
    .post-card {
      margin-bottom: 20px;
      padding: 15px;
      border-radius: 10px;
      width: 90%;
      background-color: white;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .post-btns {
      display: flex;
      justify-content: space-around; /* 让按钮水平分布 */
      padding: 0 0 10px;
      border-bottom: 1px solid #e0e0e0;
      background-color: #fff;
    }
    .btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      .icon {
        margin-bottom: 5px;
        font-size: $uni-icon-size-base; /* 图标大小 */
      }
      .label {
        font-weight: bold;
        font-size: $uni-font-size-base; /* 标签文字大小 */
        color: $uni-text-color-grey;
      }
    }
  }
}
</style>
